<!-- 题目导出 预览 弹框 -->
<template>
  <el-dialog
    :title="ancestorsName"
    :visible="open"
    width="1200px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @close="cancel()"
  >
    <div class="">
      <el-button
        type="warning"
        class="export_btn"
        plain
        icon="el-icon-upload"
        size="mini"
        @click="importTopic"
      >
        批量导入试题
      </el-button>
    </div>
    <div class="flexBet checkBox">
      <!-- 检查表格 -->
      <div class="edit_texteara">
        <wangEditor
          :importOpen="false"
          placeholder="请输入题目"
          v-model="content"
        />
      </div>
      <!-- 呈现表格 -->
      <div class="topicBox">
        <div class="topicContain">
          <div
            class="topic"
            v-for="(item, index) in topicsShowArr"
            :key="index"
          >
            <!-- 题目 -->
            <div class="topicTitle flex">
              <div class="topicType">
                {{ index + 1 }}.【{{ topicType[item.type] }}】
              </div>
              <div class="topicTitleText" v-html="item.question"></div>
            </div>
            <!-- 选项 -->
            <div
              class="topicOptions"
              v-if="item.type == 'multi_choice' || item.type == 'choice'"
            >
              <div
                class="topicOptionItem flex"
                v-for="(option, optionIndex) in JSON.parse(item.options)"
                :key="optionIndex"
              >
                <div class="topicOptionA">{{ option }}.</div>
              </div>
            </div>
            <!-- 答案 -->
            <div class="topicAnswer">
              <div class="topicAnswerText">答案：{{ item.answer }}</div>
            </div>
            <!-- 分数 -->
            <div class="topicScore">分值：{{ item.score }}</div>
            <!-- 难题程度 -->
            <div class="topicDifficulty">难题程度：{{ item.difficulty }}</div>
            <!-- 解析 -->
            <div class="topicAnalysis">
              <div class="topicAnalysisText">解析：{{ item.resolve }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <topicImportByFile
      @topicGet="topicGet"
      :open.sync="topicImportByFileOpen"
      :indexId.sync="indexId"
    ></topicImportByFile>
  </el-dialog>
</template>

<script>
import topicImportByFile from './topicImportByFile.vue'
import wangEditor from '@/components/wangEditor.vue'

export default {
  name: 'topicImport',
  components: { wangEditor, topicImportByFile },
  props: {
    open: Boolean,
    topics: [Array],
    indexId: [String, Number],
    ancestorsName: String
  },
  data() {
    return {
      content: '',
      topicImportByFileOpen: false,
      topicType: {
        choice: '单选题',
        judgement: '判断题',
        filling: '填空题',
        multi_choice: '多选题',
        QA: '简答题',
        operation: '操作题'
      },
      topicsShowArr: [],
      topicFileImportArr: [
        {
          id: null,
          indexId: 157913,
          courseId: null,
          type: 'choice',
          question:
            '单选、多选题选项内容不可重复，且选项与选项之间不要有空行。答案支持两种录入方式：（1）答案可在（）内标出，答案必须为英文字母，多选题需输入多个英文字母（至少2个字母），如：题干（ABD）或题干（A）；（2）“‘答案：’+答案内容”（如：答案：ABC）。题目示例：教育学的研究对象是（   ）',
          options:
            '["A.学校教育现象","B.家庭教育现象","C.社会教育现象","D.个体的主观能动性"]',
          answer: 'A',
          createTime: null,
          uuid: 'a4c5eb01-224c-4602-9ec0-a5897bc8da0b',
          difficulty: '简单',
          score: 1,
          resolve: '教育学的研究对象答案解析',
          resultType: 'warning',
          msg: '试题重复，试题库中已存在此试题',
          sort: null
        },
        {
          id: null,
          indexId: 157913,
          courseId: null,
          type: 'multi_choice',
          question: '题目示例：教育现象包括？',
          options:
            '["A.学校教育","B.家庭教育","C.社会教育","D.模仿行为","E.遗传"]',
          answer: 'A，B，C',
          createTime: null,
          uuid: 'a4c5eb01-224c-4602-9ec0-a5897bc8da0b',
          difficulty: '简单',
          score: 1,
          resolve: '教育学的研究对象答案解析',
          resultType: 'warning',
          msg: '试题重复，试题库中已存在此试题',
          sort: null
        },
        {
          id: null,
          indexId: 157913,
          courseId: null,
          type: 'filling',
          question:
            '题干中作答处须用下划线标明，答案可用下划线标出。答案若有多个空，用分号“；”隔开，如：答案：李白；白居易。题目示例：昆体良是古罗马著名的___和___，其巨著《___》系统地总结了___学校教育、教学的实践经验。',
          options: null,
          answer: '{演说家$教育家}|雄辩术原理|古罗马&古希腊',
          createTime: null,
          uuid: 'a4c5eb01-224c-4602-9ec0-a5897bc8da0b',
          difficulty: '简单',
          score: 1,
          resolve: '教育学的研究对象答案解析',
          resultType: 'warning',
          msg: '试题重复，试题库中已存在此试题',
          sort: null
        },
        {
          id: null,
          indexId: 157913,
          courseId: null,
          type: 'judgement',
          question:
            '答案支持对/错 或者 正确/错误 或者 T/F 或者 True/False。答案可用（）标明。如：题干。（对）。题目示例：孔子流传于世的著作是《学记》。',
          options: null,
          answer: '错',
          createTime: null,
          uuid: 'a4c5eb01-224c-4602-9ec0-a5897bc8da0b',
          difficulty: '简单',
          score: 1,
          resolve: '教育学的研究对象答案解析',
          resultType: 'warning',
          msg: '试题重复，试题库中已存在此试题',
          sort: null
        },
        {
          id: null,
          indexId: 157913,
          courseId: null,
          type: 'QA',
          question: '题目示例：简述维果斯基的“最近发展区理论”。',
          options: null,
          answer:
            '维果斯基的“最近发展区理论”，认为学生的发展有两种水平：一种是学生的现有水平，指独立活动时所能达到的解决问题的水平；另一种是学生可能的发展水平，也就是通过教学所获得的潜力。两者之间的差异就是最近发展区。',
          createTime: null,
          uuid: 'a4c5eb01-224c-4602-9ec0-a5897bc8da0b',
          difficulty: '简单',
          score: 1,
          resolve: '教育学的研究对象答案解析',
          resultType: 'warning',
          msg: '试题重复，试题库中已存在此试题',
          sort: null
        }
      ]
    }
  },
  watch: {
    content(e) {
      console.log(e)
      this.topicsShowArr = this.richTextToArray(e)
      console.log(this.topicsShowArr)
    },
    open(e) {
      if (e) {
        for (let index = 0; index < this.topicFileImportArr.length; index++) {
          let topic = ''
          topic += `<p>${index + 1}.【${
            this.topicType[this.topicFileImportArr[index].type]
          }】${this.topicFileImportArr[index].question}</p>
          `
          if (
            this.topicFileImportArr[index].type == 'choice' ||
            this.topicFileImportArr[index].type == 'multi_choice'
          ) {
            let options = JSON.parse(this.topicFileImportArr[index].options)
            for (let j = 0; j < options.length; j++) {
              topic += `<p>${options[j]}</p>`
            }
          }
          topic += `
          <p>答案：${this.topicFileImportArr[index].answer}</p>
          <p>分数:${this.topicFileImportArr[index].score}</p>
          <p>难易程度:${this.topicFileImportArr[index].difficulty}</p>
          <p>答案解析:${this.topicFileImportArr[index].resolve}</p>
          </br>`
          this.content += topic
        }
      }
    }
  },
  methods: {
    richTextToArray(richText) {
      // 按题目分割富文本（以 <br/> 或换行分隔）
      const questions = richText.split(/(?=\d+\.【)/).filter((q) => q.trim())

      const result = []
      for (const q of questions) {
        // 提取题目类型
        const typeMatch = q.match(/【(单选题|多选题|填空题|判断题|简答题)】/)
        if (!typeMatch) continue
        const type = {
          单选题: 'choice',
          多选题: 'multi_choice',
          填空题: 'filling',
          判断题: 'judgement',
          简答题: 'QA'
        }[typeMatch[1]]

        // 提取题干（移除类型标记和答案部分）
        const question = q
          .replace(/【.+?】/, '')
          .split(/答案：|分数:|难易程度:|答案解析:/)[0]
          .trim()

        // 提取选项（仅选择题/多选题）
        let options = null
        if (type === 'choice' || type === 'multi_choice') {
          const optionMatches = q.matchAll(/<p>([A-Z]\..+?)<\/p>/g)
          options = Array.from(optionMatches, (m) => m[1])
        }

        // 提取答案
        let answer = ''
        const answerMatch = q.match(/答案：(.*?)(<p>分数:|$)/s)
        if (answerMatch) {
          answer = answerMatch[1]
            .trim()
            .replace(/[（）]/g, '') // 移除括号
            .replace(/，/g, ',') // 统一分隔符
            .replace('</p>', '') // 移除括号
        }

        // 提取分数、难度、解析
        const scoreMatch = q.match(/分数:(\d+)/)
        const difficultyMatch = q.match(/难易程度:(.+?)(<p>|$)/)
        const resolveMatch = q.match(/答案解析:(.+?)(<p>|$)/)

        result.push({
          type,
          question,
          options: options ? JSON.stringify(options) : null,
          answer,
          score: scoreMatch ? parseInt(scoreMatch[1]) : 1,
          difficulty: difficultyMatch ? difficultyMatch[1].trim() : '简单',
          resolve: resolveMatch ? resolveMatch[1].trim() : '',
          // 其他字段（如 uuid 等需自行生成）
          id: null,
          uuid: '', // 假设有生成 UUID 的函数
          resultType: 'success',
          msg: ''
        })
      }
      return result
    },
    topicGet(e) {
      console.log(e)
    },
    importTopic() {
      this.topicImportByFileOpen = true
    },
    // 取消按钮
    cancel() {
      this.$emit('update:open', false)
    },
    /** 提交按钮 */
    submitForm: function() {
    }
  },
  created() {
  },
  mounted() {
  }
}
</script>
<style scoped lang="scss">
.checkBox {
  .edit_texteara {
    width: 50%;
  }

  .topicBox {
    width: 40%;
  }
}
</style>
